<template>
  <div class="border-box">
    <div class="data-area">
      <div class="left">
        <Left />
      </div>
      <div class="left-neighbor">
        <LeftNeighbor />
      </div>
      <div class="centre">
        <Center />
      </div>
      <div class="right">
        <Right />
      </div>
      <div class="right-neighbor">
        <RightNeighbor />
      </div>
      <div class="bottom">
        <Bottom />
      </div>
    </div>
  </div>
</template>

<script>
import Center from './centre.vue';
import Left from './left.vue';
import Right from './right.vue';
import LeftNeighbor from './leftNeighbor.vue';
import RightNeighbor from './rightNeighbor.vue';
import Bottom from './bottom.vue';
export default {
  name: 'DafosiControlWebIndex',
  components: { Center, Left, Right, LeftNeighbor, Bottom, RightNeighbor },

  props: {
    // 头部发光背景
    bg: {
      type: String,
      default: require('../../../assets/img/decisionAnalysis/border_box.png')
    }
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
.border-box {
  box-sizing: border-box;
  width: 216rem;
  overflow-x: auto;
  position: relative;
  padding: 0rem 1.125rem;
  height: 62.5625rem;
}
.data-area {
  width: 100%;
  display: grid;
  grid-gap: 0.75rem;
  grid-template-areas:
    "left left-neighbor  centre  right-neighbor right"
    "left left-neighbor centre right-neighbor right"
    "left bottom bottom  right-neighbor right";
  .left {
    grid-area: left;
  }
  .left-neighbor {
    grid-area: left-neighbor;
  }
  .centre {
    grid-area: centre;
    width: 86.5rem;
  }
  .right-neighbor {
    grid-area: right-neighbor;
  }
  .bottom {
    grid-area: bottom;
    height: 21.75rem;
    // width: 116.875rem;
  }
  .right {
    grid-area: right;
  }

  // 等高区域
  .left-neighbor,
  .centre {
    height: 37.5rem;
  }
  // 等宽区域
  .left,
  .left-neighbor,
  .right,
  .right-neighbor {
    width: 29.625rem;
  }
  // 背景
  // .left,
  // .left-neighbor,
  // .right,
  // .right-neighbor,
  // .centre {
  //   // background-color: #031835 !important;
  // }
}
</style>
